<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>搜索分析- 筛选条件分析</title>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet"  href="${rc.contextPath}/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
<link rel="stylesheet"  href="${rc.contextPath}/stylesheets/daterangepicker.css">
<link rel="stylesheet"  href="${rc.contextPath}/stylesheets/loading.css">
<link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>
</head>
<style>
 tr,th{text-align: center;}
 a:hover{color:blue;text-decoration: none;}
</style>
<body class="no-skin" style="background-color: #FFF;">
	<div class="page-content">
		<div class="tabbable">
			<div class="tab-content">
				<div id="manage" class="tab-pane active in">
					<div class="row">
						<div class="col-sm-12">
<!-- 						<a href="/rhino/searchStatistic/screeningAnalysis" id="iframeReload"> <i class="ace-icon fa fa-refresh" style="font: normal normal normal 25px/1 FontAwesome;float:right;"></i></a>
 -->						<!-- 筛选条件开始 -->
							<div class="row">
								<div class="col-xs-12">
									<div class="widget-box">
										<div class="widget-header widget-header-small">
											<h4 class="widget-title">品类筛选条件分析(PV)</h4>
										</div>
										<div class="widget-body" style="background-color: #EFF3F8;">
											<div class="widget-main">
												<form class="form-inline" id="searchForm" method="post" action="#">
													<div class="form-group">
														<label for="exampleInputName2">选择时段
															<input type="text" id="config-demo" name="chooseTime"  class="form-control time">
															<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																昨日
															</button>
															<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																过去7天
															</button>
															<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																过去31天
															</button>
														</label>
														<label for="exampleInputName" style="margin-left: 30px;">品类：
															<select class="chosen-select" tabindex="2"  name="category_id" id="category_id" style="width:100px;">
																 <#list typeArr as item>
																	<option value="${item.value}" <#if item.showName == '景点门票'>selected</#if> >${item.showName}</option>
																 </#list>
															</select>
														</label>
														
														<label for="exampleInputName" style="margin-left: 30px;">平台：
															<select class="chosen-select" tabindex="2" name="platform_code" id="platform_code" style="width:80px;">
																<option value="">全部</option>
																<!-- <option value="pc">PC</option> -->
																<option value="app" selected>APP</option>
																<option value="wap">WAP</option>
															</select>
														</label>
														
														<button id="search" type="button" class="btn btn-pink btn-sm"  style="margin-left: 50px;">
															<span class="ace-icon fa fa-search icon-on-right bigger-110"></span> Search
														</button>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 筛选条件结束 -->
							<div style="height:1000px;">
								<div class="row">
									<div class="col-xs-6">
										    <div class="widget-box">
											 	<div class="widget-header widget-header-flat">
													<h4 class="widget-title lighter">
														<i class="ace-icon fa fa-star orange"></i>品类筛选条件点击量统计
													</h4>
													<span style="font-size: 10px;">(视图可点击！！)</span>
													<label class="help_img">
														<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
														<span class='tips'>一段时间内各品类一级筛选条件的使用总次数<s></s></span>
													</label>
												</div>
												 <div class="widget-header widget-header-small">
													<div id="statistical-chart" style="height: 400px;"></div>
												 </div>
										</div>
									</div>
									<div class="col-sm-6"   style="padding-left: 0px!important;">
										    <div class="widget-box">
										    	<div class="widget-header widget-header-flat">
													<h4 class="widget-title lighter">
														<i class="ace-icon fa fa-signal  blue"></i>品类筛选条件点击量趋式
													</h4>
													<label class="help_img">
														<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
														<span class='tips'>一段时间内各品类一级筛选条件逐日的搜索次数<s></s></span>
													</label>
												</div>
												  <div class="widget-header widget-header-small">
													 <div id="tendency-chart" style="height: 400px;"></div>
												  </div>
											</div>
									   </div>
								</div>
								<div style="height:500px;" id="showDiv">
									<div class="row"  id="secondDiv" style="height:500px;">
										<div class="col-sm-6">
												<div class="widget-box transparent">
													<div class="widget-body">
														<div class="widget-main no-padding">
															<div class="widget-header widget-header-flat">
																<h4 class="widget-title">
																	<i class="ace-icon fa fa-star orange"></i><label class="secondName"></label><label style="margin-left: 20px;font-size: 12px;" id="dateSection"></label>
																</h4>
																<label class="help_img">
																	<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
																	<span class='tips'>一段时间内二级筛选条件的使用次数<s></s></span>
																</label>
															</div>
															<div class="widget-header widget-header-small">
																<div id="detailLV-chart" style="height: 400px;"></div>
															</div>
														</div>
												   </div>
												</div>
										  </div>
									</div>
									
									<div class="row"  id="thirdDiv" style="display: none;">
									  <div class="col-sm-6">
										<div class="widget-box transparent">
											<div class="widget-body">
												<div class="widget-main no-padding">
													<div class="widget-header widget-header-small" style="min-height: 38px;">
														<h4 class="widget-title"><i class="ace-icon fa fa-star orange"></i><span class="secondName"></span>
														<label class="help_img">
															<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
															<span class='tips'>一段时间内二级筛选条件的使用次数<s></s></span>
														</label>
														</h4>
													</div>
													<table class="table table-bordered table-striped">
														<thead class="thin-border-bottom">
															<tr>
																<th> <i class="ace-icon fa fa-caret-right blue"></i>序号 </th>
																<th> <i class="ace-icon fa fa-caret-right blue"></i>筛选父级</th>
																<th class="hidden-480"><i class="ace-icon fa fa-caret-right blue"></i>筛选次数</th>
																<th>操作</th>
															</tr>
														</thead>
														<tbody class="secondtab">
															
														</tbody>
													</table>
												 </div>
											   </div>
											 </div>
											</div>
											
											<div class="col-sm-6"  style="padding-left: 0px!important;">
											 <div class="widget-box transparent">
												<div class="widget-body">
													<div class="widget-main no-padding">
														<div class="widget-header widget-header-small">
															<h4 class="widget-title"><i class="ace-icon fa fa-star orange">排名前十</i><span class="thirdName"></span><label style="margin-left: 20px;" class="dateSection"></label></h4>
															<label class="help_img">
																<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
																<span class='tips'>一段时间内排名前十的三级筛选条件的使用次数<s></s></span>
															</label>
														</div>
														<div class="widget-header widget-header-small">
															<div id="detail-chart" style="height: 400px;"></div>
														</div>
													</div>
												</div>
										  </div>
										</div>
									</div>
						   </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	
	</div>
	
	</div>
	<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
	<script src="${rc.contextPath}/assets/js/user/base.js"></script>
	<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
	<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/g2.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/g2-modal.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/slider.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
	<script type="text/javascript">
	 d3.select(self.frameElement).style("height", "1200px");
	var yData1;
	var xData1;
	var yData2;
	var xData2;
	var myChart1;
	var myChart2;
	$(document).ready(function(){
		getSearchDate();
	});
	$("#search").on("click",function(){
		getSearchDate();
	});
	function getSearchDate(){
		var choose_date = $("#config-demo").val();
		var platform_code = $("#platform_code").val();
		var category_id =  $("#category_id").val();
		$.ajax({
			url : '${rc.contextPath}/searchStatistic/filterAjaxData',
			type : "POST",
			data : {
				choose_date:choose_date,
				platform_code:platform_code,
				category_id:category_id
			},
			beforeSend: function(){
 			   $("#search").attr("disabled",true);
				openPartialLayer($("#tendency-chart"));
				openPartialLayer($("#statistical-chart"));
 			   $("#secondDiv").hide();
			   $("#thirdDiv").hide();
	    	 },
		    complete: function(){
		    	$("#search").attr("disabled",false);
				removeLoading($("#tendency-chart"));
				removeLoading($("#statistical-chart"));
		    },
			success:function(data) {
				var defs = {
						'category': {
							alias : '搜索条件'
						},
						'amount': {
							alias :'次数(次)'
						},
						'time':{
							type: 'time',
							tickCount: 8
						}
					}; 
				var chart = histogramModal(data.barData,'statistical-chart','category','amount','搜索条件','次数(次)','400',defs);
			    if(data.barData != "" && data.barData != null){
			      chart.on('plotclick',function(ev){
					  var data = ev.data;
					  if (data) {
					    var name = data._origin['category'];
					    var value = data._origin['amount'];
					    getSearchType(name,value);
					  }
					});
					$("#statistical-chart").css("cursor","pointer");
					var dataFirst = chart.getAllGeoms()[0].getData()[0];
					getSearchType(dataFirst._origin['category'],dataFirst._origin['amount']);
			    }else{
			    	$("#secondDiv").hide();
					$("#thirdDiv").hide();
			    }
			    lineChartModal(data.lineData,'tendency-chart','time','amount','category','','次数(次)','400',defs);
			},
			error:function(data) {
				showMsg("查询数据有误");
			}
		});
	}
	
	var yData3;
	var xData3;
	var yData4;
	var xData4;
	var myChart3;
	var myChart4;
  
  function getSearchType(type,value){
		var choose_date = $("#config-demo").val();
		var platform_code = $("#platform_code").val();
		var category_id =  $("#category_id").val();
		$.ajax({
			url : '${rc.contextPath}/searchStatistic/childrenAjaxData',
			type : "POST",
			data : {
				choose_date:choose_date,
				platform_code:platform_code,
				category_id:category_id,
				type:type
			},
			beforeSend: function(){
				openPartialLayer($("#showDiv"));
	    	},
			complete: function(){
				$("#search").attr("disabled",false);
				removeLoading($("#showDiv"));
			},
			success:function(data) {
				 if(data.code == '3'){
			    	$("#thirdDiv").show();
				    $("#secondDiv").hide();
				    $("#thirdDiv .secondName").html(type);
				    $(".dateSection").html(choose_date);
				    var tbody = "";
				    var map = data.childMap;
				    var endmap = data.endMap
				    var i = 1;
				    for (key in map) {
					     tbody +=  "<tr>"+
								"<td>"+i +"</td>"+
								"<td><small class='keyValue'>"+key +"</small></td>"+
								"<td class='hidden-480'> <span id='thirdkeyvalue'>"+ map[key]+"</span></td><td><i class='ace-icon fa fa-hand-o-right icon-animated-hand-pointer red'></i></td>"+
							"</tr>"; 
							i = i+1;
					}
					$(".secondtab").html(tbody);
					$(".secondtab").css("cursor","pointer");
					$("#thirdDiv tbody tr").on('click', function() {
						$("#thirdDiv td i").removeClass("gray").addClass("red");
						$(this).children("td").eq(3).children("i").removeClass("red").addClass("gray");
						$("#thirdDiv tr").css("background-color","");
						$(this).css("background-color","#d9edf6");
						 getChildDetail($(this).find(".keyValue").html(),$(this).find("#thirdkeyvalue").html(),endmap);
					});
					$("#thirdDiv tbody tr:first-child").click();
			     }else if(data.code == '2'){
			   		$("#thirdDiv").hide();
				    $("#secondDiv").show();
				    $("#secondDiv .secondName").html(type);
				    $("#secondDiv #secondNum").html(value);
				    $("#secondDiv #dateSection").html(choose_date);
				    var defs = {
						'category': {
							alias : '类别'
						},
						'amount': {
							alias :'点击量(次)'
						}
					};
				    horizontalHistogramModal(data.sechildData,'detailLV-chart','category','amount',400,defs);
			    }else{
			      $("#thirdDiv").hide();
				  $("#secondDiv").hide();
			    }
			},
			error:function(data) {
				//showMsg("查询数据有误");
			}
		});
	}
	function getChildDetail(key,value,endmap){
	    $("#thirdDiv .thirdName").html(key);
	    var map = endmap[key];
	    var defs = {
						'category': {
							alias : '景点区域'
						},
						'amount': {
							alias :'点击量(次)'
						}
					};
	    horizontalHistogramModal(map,'detail-chart','category','amount',400,defs);
	}
	
 </script>
</body>
</html>